<template>
  <div>
    <van-nav-bar title="孝心服务" />
    <!-- 搜索 -->
    <van-search v-model="keyword" placeholder="请输入搜索关键词" />

    <!-- 商品列表 -->
    <div class="goods-list">
      <div class="goods-left">
        <div class="left-item" :class="{'left-item-active':index == leftActive}" v-for="(item, index) in leftList"
          :key="index" @click=toggleLeft(index)>
          {{ item.title }}
        </div>
      </div>
      <div class="goods-right">
        <div class="right-item" v-for="(item, index) in rightList[leftActive]" :key="index">
          <van-icon class="goods-icon" name="shop-o" />

          <div class="goods-detail">
            <div class="goods-detail-item">
              <span>服务内容</span>
              <span class="goods-name">{{ item.name }}</span>
            </div>
            <div class="goods-detail-item">
              <span>人工费用</span>
              <span>{{ item.m1 }}</span>
              <span>元</span>
            </div>
            <div class="goods-detail-item">
              <span>材料费用</span>
              <span>{{ item.m2 }}</span>
              <span>元</span>
            </div>
            <div class="goods-detail-item">
              <span>综合费用</span>
              <span>{{ item.m }}</span>
              <span>元</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 选择结果 -->
    <div class="goods-order">
      <div class="order-nums"><span>已选</span><span class="goods-num">0</span><span>件商品</span></div>
      <div class="order-money"><span>总计</span><span class="goods-money">0</span><span>元</span></div>
      <van-icon class="order-del" name="delete-o" />
      <van-button class="order-btn" type="danger">确认下单</van-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        keyword: "",
        leftList: [
          // {
          //   title: "生活照料",
          // },
          {
            title: "医疗护理",
          },
          // {
          //   title: "健康促进",
          // },
          // {
          //   title: "情感关怀",
          // },
          {
            title: "个性化膳食",
          },
          // {
          //   title: "就医陪护",
          // },
          {
            title: "跑腿买药",
          },
          {
            title: "健康保险",
          },
        ],
        rightList: [[
          {
            name: "更换尿不湿",
            m1: "10.00",
            m2: "20.00",
            m: "30.00",
          },
          {
            name: "加餐",
            m1: "10.00",
            m2: "20.00",
            m: "30.00",
          },
          {
            name: "打扫卫生",
            m1: "10.00",
            m2: "20.00",
            m: "30.00",
          }
        ],
        [
          {
            name: "火腿肠",
            m1: "10.00",
            m2: "20.00",
            m: "30.00",
          },
          {
            name: "面包",
            m1: "10.00",
            m2: "20.00",
            m: "30.00",
          },
          {
            name: "香蕉",
            m1: "10.00",
            m2: "20.00",
            m: "30.00",
          }
        ],
        [
          {
            name: "健胃消食片",
            m1: "10.00",
            m2: "20.00",
            m: "30.00",
          },
          {
            name: "三九感冒灵",
            m1: "10.00",
            m2: "20.00",
            m: "30.00",
          },
          {
            name: "益安宁丸",
            m1: "10.00",
            m2: "20.00",
            m: "30.00",
          }
        ],
        [
          {
            name: "意外险",
            m1: "10.00",
            m2: "20.00",
            m: "30.00",
          },
        ]
        ],
        leftActive: 0,
      };
    },
    methods: {
      toggleLeft(i) {
        this.leftActive = i;
      }
    },
  };
</script>

<style>
  .goods-list {
    display: flex;
    height: 70vh;
    overflow-y: scroll;
    border: 1px solid #ededed;
  }

  .goods-left {
    flex-basis: 25vw;
    border-right: 1px solid #ededed;
  }

  .left-item {
    padding: 3vw 0;
    font-weight: 700;
  }

  .left-item-active {
    background: #3396fc;
    color: #ffffff;
  }

  .goods-right {
    flex-basis: 75vw;
  }

  .right-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2vw;
    border-bottom: 1px solid #ededed;
  }

  .goods-icon {
    font-size: 16vw;
  }

  .goods-detail {
    text-align: left;
  }

  .goods-detail-item {
    margin-bottom: 1vw;
    color: #d1d8e3;
  }

  .goods-name {
    font-size: 18px;
    font-weight: 700;
    color: #0d0d0d;
  }

  .goods-order {
    padding: 2vw;
    display: flex;
    align-items: center;
    justify-content: end;
  }

  .order-nums,
  .order-money {
    margin-right: 3vw;
  }

  .goods-num,
  .goods-money {
    padding: 0 2vw;
    color: #e04949;
  }

  .order-del {
    font-size: 14vw;
    margin-right: 3vw;
  }

  .order-btn {
    border-radius: 5px;
  }
</style>